<template>
	<view>
		<view class="">
			<view class="tagBox">
				<u-tag :text="item.name" v-for="item in selectList" :key="item.id"></u-tag>
			</view>
			<u-button :disabled="disabled" type="primary" :plain="true" text="选择" @click="clickBtn"></u-button>
		</view>
		<u-popup :show="show" @close="close" @open="open" round="20" customStyle="myStyle" closeable>
			<view class="popupBox">
				<u-tabs :list="list1" @click="click"></u-tabs>
				<view class="userList">
					<u-button class="buttons" :text="item.name" v-for="item in userList" :key="item.id" @click="clickItem(item)" :type="item.isSelect ? 'primary' : 'info'"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getDeptSimpleList} from '@/api/user/deptApi'
	import {oaUserByDeptId,getOaUser} from '@/api/user/userApi'
	export default {
		model:{
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		props:{
			value:()=>{
				return new Array()
			},
			disabled:false
		},
		watch:{
			value:{
				handler(newVal, oldVal) {
				  this.selectList = [];
				  if(newVal){
					  newVal.forEach(item=>{
						  this.selectList.push({
							id:item.userId ? item.userId : item.id,
							name:item.userName ? item.userName : item.name
						  })
					  })
				  }
				  
				},
				immediate:true
			}
		},
		data() {
			return {
				show:false,
				list1:[],
				// 当前人员列表
				userList:[],
				// 选中人员列表
				selectList:[]
			};
		},
		methods:{
			close(){
				this.show = false;
				let arr = JSON.parse(JSON.stringify(this.selectList))
				this.$emit('input',arr)
			},
			clickBtn(){
				this.show = true;
			},
			// 获取部门数据
			async getDeptList(){
				let data = await getDeptSimpleList()
				this.list1 = data.data;
			},
			// 点击tabs
			async click(data){
				console.log(data);
				// 获取人员数据
				let info = await oaUserByDeptId(data.id);
				console.log(info)
				let arr = info.data;
				this.userList = arr.map(item=>{
					let obj = {
						id:item.id,
						name:item.name,
						isSelect:false
					}
					return obj
				});
				// 默认选中
				for (let i = 0; i < this.selectList.length; i++) {
				  for (let j = 0; j < this.userList.length; j++) {
					if (this.selectList[i].id == this.userList[j].id) {
					  this.userList[j].isSelect = true
					  break
					}
				  }
				}
			},
			clickItem(data){
				console.log(data);
				// 判断选中列表是否拥有
				let obj = {
					id:data.id,
					name:data.name
				};
				let index = this.selectList.findIndex(item=>{
					return item.id == obj.id
				});
				if(index >= 0){
					// 取消选中
					this.selectList.splice(index,1)
					this.userList.forEach(item=>{
						if(item.id == obj.id){
							item.isSelect = false;
						}
					})
				}else{
					// 选中
					this.selectList.push(obj)
					this.userList.forEach(item=>{
						if(item.id == obj.id){
							item.isSelect = true;
						}
					})
				}
			},
			// 打开弹框时
			async open(){
				// 获取人员数据
				let info = await oaUserByDeptId(this.list1[0].id);
				let arr = info.data;
				this.userList = arr.map(item=>{
					let obj = {
						id:item.id,
						name:item.name,
						isSelect:false
					}
					return obj
				});
			},
		},
		mounted() {
			this.getDeptList()
		}
	}
</script>

<style lang="less" scoped>
	.tagBox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
.popupBox{
	width: 100%;
	min-height: 70vh;
	padding: 20rpx;
	box-sizing: border-box;
	padding-top: 40rpx;
	.userList{
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-top: 20rpx;
		.buttons{
			width: 30%;
			margin: 0;
			margin-right: 5%;
			&:nth-of-type(3n){
				margin-right: 0;
			}
		}
	}
}
</style>
